<template>
<div class="aa">
<!-- <mkScrollbar>-->
<!--   <h1 v-for="i in 100">{{i}}</h1>-->
<!-- </mkScrollbar>-->
<mk-edit-picker
    :min="2000"
    :max="4000"
    mask-color="linear-gradient(to right,#2989CC 20%,#969696 54%,#ECBB35 100%)"
    @change="change" v-model="v" />
  <mk-edit-picker
      :min="2000"
      maskColor="linear-gradient(to right,#1C8463 15%,#9834B9)"
      :max="4000" @change="change" v-model="v">
    <template v-slot:title>
      <span>色调</span>
      <span>46</span>
    </template>
  </mk-edit-picker>
  <mk-edit-picker
      :min="2000"
      :maskWidth="100"
      bg-color="linear-gradient(to right,#d6d986 8%,#81db81 17%,#71d7e9 25%,#b165ec 34%,#d481a1 45%,#dbdd9c 57%,#81db81 66%,#71d7e9 76%,#b165ec 88%,#b165ec 88%);"
      :max="4000" @change="change" :value="-21">
    <template v-slot:title>
      <span>自然饱和度</span>
      <span>-40</span>
    </template>
  </mk-edit-picker>
  <mk-edit-picker
      :min="2000"
      :maskWidth="100"
      bg-color="linear-gradient(to right,#d6d986 8%,#81db81 17%,#71d7e9 25%,#b165ec 34%,#d481a1 45%,#dbdd9c 57%,#81db81 66%,#71d7e9 76%,#b165ec 88%,#b165ec 88%);"
      :max="4000" @change="change" :value="-24">
    <template v-slot:title>
      <span>饱和度</span>
      <span>-40</span>
    </template>
  </mk-edit-picker>
  <mk-edit-picker
      :min="2000"
      :maskWidth="100"
      bg-color="linear-gradient(to right,#b5b5b5 0,#515151 11%,#b5b5b5 22%,#515151 33%,#b5b5b5 45%,#515151 56%,#b5b5b5 67%,#515151 79%,#b5b5b5 90%,#515151 100%);"
      :max="4000" @change="change" :value="24">
    <template v-slot:title>
      <span>对比度</span>
      <span>24</span>
    </template>
  </mk-edit-picker>
</div>
</template>

<script>
import mkEditPicker from "../components/mkEditPicker";
export default {
  name: "videoTemp",
  components:{mkEditPicker},
  data(){
    return{
      v:46
    }
  },
  methods:{
    change(e){
      console.log(e)
    }
  }
}
</script>
<style scoped>
.aa{
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  height: 600px;
}
</style>
